<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root {
            display: flex;
            flex-direction: column;
        }

        div {
            display: flex;
            flex-direction: row;
        }

        p {
            margin: 0;
        }

        i {
            color: transparent;
        }
    </style>
</head>
<body>
<div id="root">

</div>
<script>
    for (let row = 0; row < 5; row++) {
        let div = document.createElement("div");
        let p = document.createElement("p");
        let i = document.createElement("i");
        for (let space = 4 - row; space > 0; space--) {
            i.innerHTML += "_";
        }
        for (let star = (row + 1) * 2 - 1; star > 0; star--) {
            p.innerHTML += "*";
        }
        div.append(i, p);
        document.getElementById("root").appendChild(div)
    }
</script>
</body>
</html>